<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<style type="text/css">
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
html{font-size:50px}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:32px;background-color:#f5f5f9}
body{line-height:40px!important;font-size:26px!important}
body,body.g-init-echart{font-family:Microsoft YaHei,Helvetica!important;color:#2e3136;background:#f5f6f7!important}
.v-goods-cart ._select {
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 1px solid #9b9b9b;
    border-radius: 100%;
    text-align: center;
    line-height: 44px;
    color: #fff;
    margin: 0 30px 0 10px;
    background: #fff;
}
.v-goods-cart ._select._allSelected, .v-goods-cart ._select._selected, .v-goods-cart ._select._selected._cloud {
    background: #fa6f60;
    border-color: #fa6f60;
}
.c-share-back {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 200px;
    z-index: 9;
    padding-left: 50px;
}
.c-share-back .__content {
    float: left;
    width: 70px;
}
.c-share-back .__icon {
    float: right;
    border-radius: 100%;
    text-align: center;
    background: rgba(0,0,0,.5);
    line-height: 70px;
    height: 70px;
    width: 70px;
    margin-top: -70px;
    color: #fff;
    font-size: 50px;
}
.shop-list-goods-fix{
	/*position: absolute!important;right:0; */
	margin-right:40px;
	border: none;
    background: rgb(255, 255, 255);
}
.shop-list-goods-reduce{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: #5ba2e4;
}
.shop-list-goods-reduce:after {
    content: "\E685";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    color: #999;
}
.shop-list-goods-amount{
	float: left;
    width: 150px;
    color: #333;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background-color: #fff;
    padding: 0 15px;
	border: 1px solid rgb(232, 232, 232);
    background: rgb(241, 241, 241);
	-webkit-appearance:none;
	outline:0;
}
.shop-list-goods-add{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: transparent!important;
	font-weight: 400;
    font-style: normal;
    display: inline-block;
}
.shop-list-goods-add:after {
    content: "\E71E";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    color: #1b9af9;
    top: 0;
    left: 0;
}
.cart-remove-box{
	-webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2; 
	justify-content: flex-end;
    align-items: center;
    display: flex;
}
span.cart-remove{ width:80px;height:100%; background:#9C9FA6; color:#ffffff; justify-content:center; align-items:center; display:flex; }
.g-radiu{ border:1px solid #fa6f60; line-height:50px; padding:0 20px; border-radius:25px;color:#fa6f60; }
</style>
</head>
<body>

{notempty name='data'}
<div id="pages">
    <div>
        <div class="g-flex g-fd-c" style="height: 100vh;">
            <div class="g-reset g-pd-lr g-flex-ac g-lh-88 g-bg-white g-bb">
                <div class="g-col g-tl">
                    <span>云进货车</span><span class="g-orange-dark">({$data.producttotalnum})</span>
				</div>
                <div class="g-col g-tr">
                    <span class='cart-edit'>编辑</span>
					<span class='g-radiu cart-remove-all'>删除</span>
				</div>
            </div>
            <div class="g-reset g-warp-scroll g-col common-bs-wrapper" style="overflow: hidden;">
                <div class="__scroller" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                    <div>
                        <ul class="v-goods-cart">
                            <li class="g-bt g-flex g-bg-white shop-list-goods-one" data-id="100">
                                <div class="g-tc g-flex-ac g-pd">
                                    <span class="_select iconfont icon-past _selected"></span>
                                    <div><img class="g-img-140" src="/static/tmp/dishiye.png" alt=""></div>
                                </div>
                                <div class="g-col-2 g-lh-60 g-pd-t g-pd-r" style='display:none'>
                                    <div class="g-twoline g-lh-44 g-fs-28 g-nobreak">玻尿酸补水原液面膜5盒装</div>
                                    <div class="g-fs-26 g-black-light g-oneline g-lh-44 g-nobreak">
                                        <span class="g-white g-m-r g-fs-22 g-bg-blue" style="border-radius: 40px; padding: 0px 10px; line-height: 36px;">云库存</span></div>
                                    <div>
                                        <span class="g-fs-28 g-orange-dark">￥340.00</span>
                                        <div class="g-fs-26 g-fr g-black-light g-tr g-lh-44">
                                            <p>X1</p>
                                        </div>
                                    </div>
                                </div>
								<div class='cart-remove-box'>
									<div class="shop-list-goods-fix">
										<div class="shop-list-goods-reduce"><i class="iconfont icon-minus"></i></div>
										<input type="text" class="shop-list-goods-amount" value="0" readonly="">
										<div class="shop-list-goods-add"><i class="iconfont icon-add"></i></div>
									</div>
									<span class='cart-remove'>删除</span>
								</div>
                            </li>
                            <li class="g-bt g-flex g-bg-white">
                                <div class="g-tc g-flex-ac g-pd">
                                    <span class="_select iconfont icon-past _selected"></span>
                                    <div>
                                        <img class="g-img-140" src="/static/tmp/dishiye.png" alt=""></div>
                                </div>
                                <div class="g-col-2 g-lh-60 g-pd-t g-pd-r">
                                    <div class="g-twoline g-lh-44 g-fs-28 g-nobreak">医用冷敷贴</div>
                                    <div class="g-fs-26 g-black-light g-oneline g-lh-44 g-nobreak">
                                        <span class="g-white g-m-r g-fs-22 g-bg-blue" style="border-radius: 40px; padding: 0px 10px; line-height: 36px;visibility:hidden;">云库存</span></div>
                                    <div>
                                        <span class="g-fs-28 g-orange-dark">￥134.00</span>
                                        <div class="g-fs-26 g-fr g-black-light g-tr g-lh-44">
                                            <p>X2</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
							
                        </ul>
                    </div>
                    <div></div>
                </div>
            </div>
            <div class="g-reset g-flex-ac v-goods-cart g-lh-88 g-bg-white g-bt g-bs">
                <div class="g-col g-flex-ac g-pd-l g-pd-r ">
                    <div class="g-col">
                        <span class="_select iconfont icon-past _allSelected" style="margin: 0px;"></span>
                        <span class="g-pd-l">全选</span></div>
                    <div class="g-lh-44 g-col-2 g-tr">
                        <p class="g-fs-30">合计：
                            <span class="g-orange-dark">￥{$data.orderamount}</span></p>
                        <p class="g-black-light g-fs-24">不含运费</p></div>
                </div>
                <div class="g-1of4 g-flex-cc g-tc g-bg-orange" style="align-self: stretch;" onclick="location.href='{:url('Order/confirm')}'">
                    <span>结算<span>（{$data.producttotalnum}）</span></span>
                </div>
            </div>
            <div class="c-share-back">
                <div class="__content">
                    <i class="iconfont icon-goback __icon"></i>
                </div>
            </div>
        </div>
    </div>
</div>
{else /}

<!--空的时候-->

<div id="pages">
	<div>
		<div class="g-flex g-fd-c" style="height: 100vh;">

			<div class="g-reset g-tc" style="padding-top: 130px;">
			<span class="g-bg-white g-br-circle iconfont icon-cart g-fs-100" style="width: 240px; height: 240px; line-height: 240px;"></span><p class="g-black-light g-fs-24 g-lh-44" style="padding-top: 48px; padding-bottom: 80px;">进货车空空如也，赶紧去逛逛吧!</p><a href="{:url('Goods/list')}"><div class="g-btn-blue">去采购</div></a>
			</div>
			<div class="c-share-back">
				<div class="__content"><i class="iconfont icon-goback __icon"></i></div>
			</div>
			
		</div>
	</div>
</div>

<!--空的时候 End-->
{/notempty}

<script>
$(function(){
	//+
	$('.shop-list-goods-add').click(function(){
		var goods_id = $(this).parents('.shop-list-goods-one').eq(0).attr('data-id');
		UpdateAmount(goods_id,true);
	});
	//-
	$('.shop-list-goods-reduce').click(function(){
		var goods_id = $(this).parents('.shop-list-goods-one').eq(0).attr('data-id');
		UpdateAmount(goods_id,false);
	});
});
function UpdateAmount(goods_id,is_add){
	let div = $('[data-id="'+goods_id+'"]');
	if(div.length < 1){
		return;
	}
	div = div[0];
	let input = $(div).find('.shop-list-goods-amount');
	var curr = parseInt(input.val());
		curr = isNaN(curr) ? 0 : curr;
	curr = is_add ? curr + 1 : curr - 1;
	curr = curr < 0 ? 0 : curr;
	
	let index = layer.open({type:2});
	setTimeout(function(){
		layer.close(index);
		input.val(curr);
		
		if(curr < 1){
			div.remove();
		}
		
		/*
		let Amount = 0;
		let Total = 0;
		$("input.shop-list-goods-amount").each(function(){
			var V = parseInt($(this).val());
			if(V == '0'){
				return true;
			}
			Amount++;
			
			Total+= V * 100;
			
		});
		
		$('#totalprice').html(Total);
		$('#totalA').html(Amount);
		*/
	},200);
}

</script>


<div id="ios-hack-view"></div>
</body>
</html>